@import "variables";
seed-regio-picker {
  padding-bottom: pxTorem(88);
  .container {
    height: 100%;
  }
  header {
    position: relative;
    height: pxTorem(88);
    line-height: pxTorem(88);
    text-align: center;
    background-color: #fff;
    .back {
      display: inline-block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: pxTorem(30);
      margin: auto;
      @include icon(21, 40, '/assets/icon/back_btn.png')
    }
  }
  .content {
    overflow-x: hidden;
    position: relative;
    height: 100%;
    @include font-dpr(28px);
    background-color: #fff;
  }
  .nav {
    padding-top: pxTorem(15);
  }
  nav {
    display: flex;
    height: pxTorem(85);
    padding-left: pxTorem(60);
    line-height: pxTorem(85);
    background-color: #fff;
    p {
      margin-right: pxTorem(60);
    }
    .active {
      position: relative;
      color: color($h5, c1);
      &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: inline-block;
        width: pxTorem(14);
        height: 2px;
        margin: auto;
        border-radius: 2px;
        background-color: color($h5, c1);
      }
    }
  }
  ul {
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    color: color($h5, c2);
    li {
      display: flex;
      align-items: center;
      padding: pxTorem(30) pxTorem(50) pxTorem(30) pxTorem(30);
      border-bottom: 1px solid #f0f0f0;
      &.active {
        position: relative;
        color: color($h5, c1);
        &::after {
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          display: inline-block;
          right: pxTorem(50);
          @include icon(24, 18, '/assets/icon/gou.png')
        }
      }
      &:last-of-type {
        border-bottom: none;
      }
    }
  }
  .provinces {
    li {}
  }
  .city,
  .district {
    z-index: 1;
    left: 100%;
    background-color: #fff;
    transition: left .3s linear;
    &.show {
      left: 0;
    }
  }
  .district {
    z-index: 2;
  }
}

.stop-scroll {
  //   overflow: hidden;
}
